<template>
	<view class="containerBox">
		<view>
			<view class="top-img">
				<image
					src="https://cdn8.axureshop.com/demo/1689476/images/%E7%AD%BE%E7%BA%A6%E8%BF%9B%E5%BA%A6-%E5%BE%85%E5%AE%A1%E6%A0%B8/u4963.png">
				</image>
				<view>{{ serviceDetail.status || '医生审核中' }}</view>
			</view>
			<view class="doctor-detail">
				<image :src="serviceDetail.doctorAvatar || '/static/logo.png'"></image>
				<view class="doctorText">
					<view>
						<text style="font-size: 18px;color: #333;margin-right: 20rpx;">{{ serviceDetail.doctorName ||
							'医生姓名' }}</text>
						<text style="font-size: 14px;color: #999;">{{ serviceDetail.doctorTitle || '全科医生' }}</text>
					</view>
					<text class="gap-small">所属机构: {{ serviceDetail.organization || '暂无' }}</text>
					<text class="gap-small">所属团队: {{ serviceDetail.team || '暂无' }}</text>
					<text class="gap-small">服务次数: 1次</text>
				</view>
			</view>
			<view class="serviceDetail">
				<view class="orderText">
					<text>服务单号</text>
					<text>{{ serviceDetail.serviceId || '暂无' }}</text>
				</view>
				<view class="orderText">
					<text>申请人</text>
					<text>{{ serviceDetail.applicant || '暂无' }}</text>
				</view>
				<view class="orderText">
					<text>服务包</text>
					<text>{{ serviceDetail.servicePackage || '暂无' }}</text>
				</view>
				<view class="orderText">
					<text>服务项目</text>
					<text>{{ serviceDetail.serviceItem || '暂无' }}</text>
				</view>
				<view class="orderText">
					<text>服务地点</text>
					<text>{{ serviceDetail.servicePlace || '暂无' }}</text>
				</view>
				<view class="orderText">
					<text>服务时间</text>
					<text>{{ serviceDetail.serviceTime || '暂无' }}</text>
				</view>
				<view class="orderText">
					<text>备注</text>
					<text>{{ serviceDetail.remark || '无' }}</text>
				</view>
				<view class="orderText">
					<text>提交时间</text>
					<text>{{ serviceDetail.submitTime || new Date().toLocaleString('zh-CN') }}</text>
				</view>
			</view>
		</view>
		<view class="commitBtn" @click="show = true">

			<button>取消预约</button>
		</view>

	</view>

	<!-- 弹窗部分 -->
	<view>
		<!-- 使用 button 插槽自定义按钮 -->
		<u-modal width="520rpx" :show="show" title="" content="确定取消此次预约服务吗？" :showCancelButton="false"
			:showConfirmButton="false" @close="show = false" class="text-color">

			<!-- 自定义底部按钮 -->
			<template #confirmButton>
				<view class="modal-footer">
					<text class="btn cancel" @tap="handleCancel">取消</text>
					<view class="divider"></view>
					<text class="btn confirm" @tap="handleConfirm">确认</text>
				</view>
			</template>
		</u-modal>
	</view>

</template>

<script setup>
import {
	ref
} from "vue"
import { onLoad } from '@dcloudio/uni-app'

// 服务详情数据
const serviceDetail = ref({})

// 弹窗
const show = ref(false);

// 页面加载时获取服务详情
onLoad(() => {
	loadServiceDetail()
})

// 加载服务详情
const loadServiceDetail = () => {
	const detail = uni.getStorageSync('currentServiceDetail')
	if (detail) {
		serviceDetail.value = detail
	} else {
		// 如果没有数据，显示默认提示
		uni.showToast({
			title: '未找到服务详情',
			icon: 'none'
		})
	}
}

const handleConfirm = () => {
	uni.showToast({
		title: '取消成功',
		icon: 'success',
		duration: 1000
	});
	show.value = false;
	setTimeout(() => {
		console.log('确认');
		uni.navigateTo({
			url: '/homepackge/pages/new-record/new-record'
		})
	}, 1000);
};
const handleCancel = () => {
	console.log('取消');
	show.value = false;
};
</script>

<style scoped lang="scss">
.modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	// padding: 0 40rpx;
	height: 100rpx;
	border-top: 1rpx solid #eee;
	padding: 0;
}

.btn {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
}

.cancel {
	color: #606266;
}

.confirm {
	color: #2979ff;
}

.divider {
	width: 1rpx;
	height: 100%;
	background-color: #dcdfe6;
}

.commitBtn {
	height: 160rpx;
	border-top: 1px solid #eee;
	display: flex;
	align-items: center;
	padding: 20rpx 40rpx;
	margin-top: 40rpx;

	button {
		width: 100%;
		height: 88rpx;
		background-color: #2984f8;
		font-size: 16px;
		color: #fff;
		line-height: 88rpx;
		text-align: center;


	}
}

.orderText {
	height: 88rpx;

	// background-color: #fff;
	text {
		font-size: 14px;
		line-height: 88rpx;
	}

	text:first-child {
		color: #999;
		margin-right: 50rpx;
		width: 150rpx;
		display: inline-block;
	}
}

.serviceDetail {
	padding-top: 20rpx;
	background-color: #fff;
	padding: 0 40rpx;
	padding-top: 30rpx;
	// margin-bottom: 40rpx;
}

.gap-small {
	font-size: 12px;
	color: #999;
	margin-top: 20rpx;
}

.doctorText {
	display: flex;
	flex-direction: column;
	margin-top: 10rpx;
}

.doctor-detail {
	height: 308rpx;
	background: #fff;
	padding: 0 40rpx;
	padding-top: 40rpx;
	display: flex;
	margin-bottom: 20rpx;

	// flex-direction: column;
	image {
		width: 220rpx;
		height: 220rpx;
		margin-right: 30rpx;

	}
}

.top-img {
	height: 260rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 20rpx;
	background: #fff;

	image {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 40rpx;
	}

	view {
		font-size: 18px;
		color: #333;
	}
}

.containerBox {
	background: #f0f8ff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
}
</style>